<template>
  <div style="width: 200px; height: calc(100vh - 70px);overflow-y: auto;">
    <el-row class="tac" style="height: 100%">
      <el-col style="height: 100%">
        <el-menu class="el-menu-vertical-demo" :default-active="$route.path" style="height: 100%" router>
          <el-menu-item index="/home" v-if="menus.includes('home')">
            <el-icon>
              <House />
            </el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="statistics" v-if="menus.includes('statistics')">
            <template #title>
              <el-icon>
                <Histogram />
              </el-icon>
              <span>统计管理</span>
            </template>
            <el-menu-item v-if="menus.includes('caseStatistics')" index="/caseStatistics">案件统计</el-menu-item>
            <el-menu-item v-if="menus.includes('documentStatistics')" index="/documentStatistics">文书统计</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2" v-if="menus.includes('dossierAndCase')">
            <template #title>
              <el-icon>
                <Tickets />
              </el-icon>
              <span>部门内审</span>
            </template>
            <el-menu-item v-if="menus.includes('case')" index="/case">案件录入</el-menu-item>
            <el-menu-item v-if="menus.includes('caseNoCheck')" index="/caseNoCheck">科室待审核</el-menu-item>
            <el-menu-item v-if="menus.includes('caseCheckNoPass')" index="/caseCheckNoPass">科室审核未通过</el-menu-item>
            <el-menu-item v-if="menus.includes('caseNoAuditor')" index="/caseNoAuditor">法规科待审核</el-menu-item>
            <el-menu-item v-if="menus.includes('caseAuditorNoPass')" index="/caseAuditorNoPass">法规科审核未通过</el-menu-item>
            <el-menu-item v-if="menus.includes('caseNoApproval')" index="/caseNoApproval">部门待审核</el-menu-item>
            <el-menu-item v-if="menus.includes('caseApprovalNoPass')" index="/caseApprovalNoPass">部门审核未通过</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3" v-if="menus.includes('caseCheck')">
            <template #title>
              <el-icon>
                <View />
              </el-icon>
              <span>管委会审批</span>
            </template>
            <el-menu-item v-if="menus.includes('caseLawNoAuditor')" index="/caseLawNoAuditor">法律待审核</el-menu-item>
            <el-menu-item v-if="menus.includes('caseLawAuditorNoPass')"
              index="/caseLawAuditorNoPass">法律审核未通过</el-menu-item>
            <el-menu-item v-if="menus.includes('caseLeaderNoApproval')"
              index="/caseLeaderNoApproval">领导待审批</el-menu-item>
            <el-menu-item v-if="menus.includes('caseLeaderApprovalNoPass')"
              index="/caseLeaderApprovalNoPass">领导审批未通过</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4" v-if="menus.includes('caseArchie')">
            <template #title>
              <el-icon>
                <FolderChecked />
              </el-icon>
              <span>归档案件</span>
            </template>
            <el-menu-item v-if="menus.includes('caseArchive')" index="/caseArchive">归档案件</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="5" v-if="menus.includes('permission')">
            <template #title>
              <el-icon>
                <Menu />
              </el-icon>
              <span>菜单管理</span>
            </template>
            <el-menu-item v-if="menus.includes('unitMenu')" index="/unitMenu">部门菜单</el-menu-item>
            <el-menu-item v-if="menus.includes('roleMenu')" index="/roleMenu">角色菜单</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="6" v-if="menus.includes('modelappy')">
            <template #title>
              <el-icon>
                <Discount />
              </el-icon>
              <span>应用维护</span>
            </template>
            <el-menu-item v-if="menus.includes('operateRecord')" index="/operateRecord">操作日志</el-menu-item>
            <el-menu-item v-if="menus.includes('template')" index="/template">模版管理</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="7" v-if="menus.includes('datadic')">
            <template #title>
              <el-icon>
                <Reading />
              </el-icon>
              <span>数据字典</span>
            </template>
            <el-menu-item v-if="menus.includes('lawsAndRegulations')" index="/lawsAndRegulations">违法行为</el-menu-item>
            <el-menu-item v-if="menus.includes('term')" index="/term">法律条款</el-menu-item>
            <el-menu-item v-if="menus.includes('laws')" index="/laws">法律列表</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="8" v-if="menus.includes('licence')">
            <template #title>
              <el-icon>
                <CreditCard />
              </el-icon>
              <span>摊位管理</span>
            </template>
            <el-menu-item v-if="menus.includes('boothLicence')" index="/boothLicence">摊位许可证</el-menu-item>
            <el-menu-item v-if="menus.includes('stall')" index="/stall">摊位地点</el-menu-item>
            <el-menu-item v-if="menus.includes('stallUser')" index="/stallUser">管理人员</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="9" v-if="menus.includes('jurisdiction')">
            <template #title>
              <el-icon>
                <Place />
              </el-icon>
              <span>辖区管理</span>
            </template>
            <el-menu-item v-if="menus.includes('placeType')" index="/placeType">经营类别</el-menu-item>
            <el-menu-item v-if="menus.includes('place')" index="/place">辖区单位</el-menu-item>
            <el-menu-item v-if="menus.includes('account')" index="/account">辖区人员</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="10" v-if="menus.includes('fiveBag')">
            <template #title>
              <el-icon>
                <Tickets />
              </el-icon>
              <span>门前五包</span>
            </template>
            <el-menu-item v-if="menus.includes('problemNotification')" index="/problemNotification">问题通知</el-menu-item>
            <el-menu-item v-if="menus.includes('frontFiveBags')" index="/frontFiveBags">检查记录</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="11">
            <template #title>
              <el-icon>
                <User />
              </el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item @click="alter">修改密码</el-menu-item>
            <el-menu-item @click="logout">退出</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
  <!--修改密码弹窗-->
  <el-dialog v-model="index" title="修改密码" :before-close="handleClose" width="450px"
    @keyup.enter.native="submitForm('ruleForm')">

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">

      <el-form-item label="原始密码" prop="password">
        <el-input show-password v-model="ruleForm.password" autocomplete="off" placeholder="请输入原始密码"
          style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="新设密码" prop="newPassword">
        <el-input show-password v-model="ruleForm.newPassword" autocomplete="off" placeholder="请输入新密码"
          style="width: 250px"></el-input>
      </el-form-item>
      <el-form-item label="密码确认" prop="newPassword2">
        <el-input show-password v-model="ruleForm.newPassword2" autocomplete="off" placeholder="请确认新密码"
          style="width: 250px"></el-input>
      </el-form-item>

    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel1">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
      </span>
    </template>

  </el-dialog>

</template>

<script>

import request from "@/utils/request";

export default {
  name: "Aside",
  data() {
    const validateNewPassword = (rule, value, callback) => {
      if (value === this.ruleForm.password) {
        callback(new Error("与原始密码一致!请修改新密码"));
      } else {
        callback();
      }
    };
    const validateNewPassword2 = (rule, value, callback) => {
      if (value !== this.ruleForm.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      user: {},
      props: ['user'],
      menus: [],

      index: false,
      ruleForm: {
        account: '',
        password: '',
        newPassword: '',
        newPassword2: '',
      },
      rules: {
        password: [
          { required: true, message: '请输入原始密码', trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入新设密码', trigger: 'blur' },
          { validator: validateNewPassword, trigger: "blur" },
        ],
        newPassword2: [
          { required: true, message: '请确认新密码', trigger: 'blur' },
          { validator: validateNewPassword2, trigger: "blur" },
        ],
      },

    }
  },

  created() {
    let userStr = localStorage.getItem("user") || "{}"
    this.user = JSON.parse(userStr)
    this.user.menus.forEach((item, index) => {
      this.menus[index] = item.path;
    })
  },

  methods: {
    //修改密码
    alter() {
      this.index = true;
    },

    //重置表单
    handleClose() {
      console.log(this.$refs.ruleForm)
      this.$refs.ruleForm.resetFields()
      this.index = false
    },

    //取消表单
    cancel1() {
      this.handleClose()
    },

    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.account = this.user.account;
          request.post("/user/changePwd", this.ruleForm).then(res => {
            if (res.code === '200') {
              if (res.data === "修改成功") {
                this.$message({
                  type: "success",
                  message: "修改成功,请重新登录"
                })
                localStorage.removeItem("user");
                this.$router.push("/Login")
              }
            } else {
              this.$message({
                type: "error",
                message: "原始密码错误"
              })
            }
          })

        }
      })
    },

    //退出
    logout() {
      this.$confirm('是否确定退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem("user");
        localStorage.removeItem("documentNumber");
        this.$router.push("/login")
        this.$message({ message: "退出登录", type: "info" });
      })
        .catch(() => {
        });

    }

  }
}
</script>

<style scoped></style>
